import React from 'react';
import {Card, Space, Typography, Tag} from 'antd';
import styled from 'styled-components';
import {API} from "@/services/typings";

const {Text} = Typography;

const StyledCard = styled(Card)`
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .ant-card-body {
    padding: 20px;
  }
`;

interface SystemStatusProps {
  serverData?: API.IServer;
}

const SystemStatus: React.FC<SystemStatusProps> = ({serverData}) => {
  return (
    <StyledCard title="系统状态" style={{marginTop: '24px'}}>
      {
        serverData && (<>
          <Space direction="vertical" style={{width: '100%'}}>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
              <Text>CUP状态</Text>
              <Tag color="success">
                当前空闲率 {`${serverData?.cpu.free} `}%
              </Tag>
            </div>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
              <Text>内存状态</Text>
              <Tag color="success">当前使用率 {serverData?.mem.used}%</Tag>
            </div>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
              <Text>JVM 运行时长</Text>
              <Tag color="success">{serverData?.jvm.runTime}</Tag>
            </div>
          </Space>
        </>)
      }

    </StyledCard>
  );
};

export default SystemStatus;
